<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <!--<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>-->
    <!--<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>-->
    <!--[endif]-->
    <script type="text/javascript" src="../../common/js/public.js"></script>
    <script type="text/javascript" src="../../common/js/publicUtils.js"></script>
    <style>
        .error{
            color: red;
            line-height: 20px;
        }
        .search .layui-table{
            margin-top: 0px !important;
        }
        .datacash.layui-table,.datacash .layui-table-view {
            margin-top: 30px !important;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="search" style="float: left;width:45%">
            <div class="layui-input-inline layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label">适用岗位</label>
                    <div class="layui-input-inline">
                        <select name="job" id="job"></select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">职责内容</label>
                    <div class="layui-input-inline">
                        <input type="text" id="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="margin-top: -5px;">
                    <button type="button" style="float: left;margin-left: 12px" class="layui-btn layui-btn-normal" onclick="loadTable()"><i class="layui-icon layui-icon-search"></i>查询</button>
                </div>
            </div>
            <table class="layui-table" id="datatable"></table>
        </div>
        <div style="float:left;width:5%;margin-top: 18%;padding-left:2.5%;">
            <div style="width: 100%">
                <img src="../../common/images/arrow-right-1.png" onclick="addData()" style="height: 40px;">
            </div>
            <div style="width: 100%;margin-top:40%;">
                <img src="../../common/images/arrow-left-1.png" onclick="removeData()" style="height: 40px;">
            </div>

        </div>
        <div class="datacash" style="float: left;width:45%;padding-top:7px;">
            <table class="layui-table" id="cashtable"></table>
        </div>
    </div>
</div>
<script>
    var nodes,tableObj,tableObj1,datas=[],jobid=[],orgTypeMap,form,table;//1为保存2为更新
    $(function () {
        orgTypeMap = getDic("OrgJob");

        loadType();
    })

    function loadType(){
        layui.use(['form','element'], function() {
            form = layui.form;
            var layer=layui.layer;;
            var option="<option value=''>全部</option>";
            for(var key of orgTypeMap){
                option += "<option value='"+key[0]+"'>"+key[1]+"</option>";
            }
            $("#job").html(option);
            form.render();
        })

    }
    /* *
     * @Author bxf
     * @Description 加载右侧数据table
     * @Date 11:54 2019/8/24
     * @param null
     * @return 
     */
    function loadRoleJob(){
        publicAjax (null,'orgrole/selectJobListByCondition',{'pageIndex':1,'pageSize':1000000,'roleId':nodes.id},null,null,function(r){
            if(r.code==2000){
                datas = r.data.list;
                $.each(datas,function(i,e){
                    jobid.push(e.id);
                })
                inintTable(datas);
            }else{
                inintTable(datas);
            }
        })
    }
    /* *
     * @Author bxf
     * @Description 初始化页面数据
     * @Date 11:53 2019/8/24
     * @param null
     * @return
     */
    function inintData(node){
        nodes = node;
        loadTable();
        loadRoleJob();
    }
    /* *
     * @Author bxf
     * @Description 加载左侧table
     * @Date 17:46 2019/7/23
     * @param null
     * @return
     */
    function loadTable(){
        var myname = $("#name").val();
        var myjob = $("#job").val();
        var tableurl = publicUrl+'orgrole/selectJobListByCondition';
        layui.use(['form','table'], function(){
            form = layui.form;
            table = layui.table;
            tableObj = table.render({
                elem: '#datatable',
                size: 'sm',
                even: true, //开启隔行背景
                height: 'full-100',
                method: 'post',
                url: tableurl, //stationId='+window.parent.window.parentId,//8AE7DECA-8E41-4FAB-8B30-9FD1B0B7FA33,78A9E5D8-20FB-4436-BBE8-A25EAC38D056
                where:{
                    "job":myjob,
                    "name":myname
                },
                headers: {"Authorization":getData("Authorization")},
                parseData: function(res){ //res 即为原始返回的数据
                    return formatTableParseData(res);
                },
                request: {
                    pageName: 'pageIndex' //页码的参数名称，默认：page
                    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                response: {
                    statusCode: 2000,
                },
                cols: [[
                    {
                        type:'checkbox',
                        width: 80,
                    },
                    {
                        type: 'numbers',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    }, {
                        field: 'code',
                        title: '职责编码',
                        width: '15%',
                        sort: true,
                        align: 'center',
                    },{
                        field: 'name',
                        title: '职责内容',
                        width: '40%',
                        align: 'center',
                    }, {
                        field: 'job',
                        title: '适用岗位',
                        width: '15%',
                        align: 'center',
                        templet: function(d) {
                            return orgTypeMap.get(d.job+"");
                        }
                    }]],
                page: true
            });

        });
    }

    /**
     * 初始化右侧table
     * @param data
     */
    function inintTable(data){
        layui.use(['form','table'], function(){
            form = layui.form;
            table = layui.table;
            tableObj1 = table.render({
                elem: '#cashtable',
                size: 'sm',
                even: true, //开启隔行背景
                height: 'full-100',
                limit:10000,
                data:data,
                cols: [[
                    {
                        type:'checkbox',
                        width: 80,
                    },
                    {
                        type: 'numbers',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    }, {
                        field: 'code',
                        title: '职责编码',
                        width: '15%',
                        sort: true,
                        align: 'center',
                    },{
                        field: 'name',
                        title: '职责内容',
                        width: '40%',
                        align: 'center',
                    }, {
                        field: 'job',
                        title: '适用岗位',
                        width: '15%',
                        align: 'center',
                        templet: function(d) {
                            return orgTypeMap.get(d.job+"");
                        }
                    }]],
                page: false
            });

        });
    }

    /**
     * 移除数据
     */
    function removeData(){
        var checkStatus = table.checkStatus('cashtable'); //datatable 即为基础参数 id 对应的值
        for(var i=0;i<checkStatus.data.length;i++){
            var index = jobid.indexOf(checkStatus.data[i].id);
            jobid.splice(index,1);
            datas.splice(index,1);
         }
        inintTable(datas);
    }

    /**
     * 添加数据
     */
    function addData(){
        var checkStatus = table.checkStatus('datatable'); //datatable 即为基础参数 id 对应的值
        for(var i=0;i<checkStatus.data.length;i++){
            if(jobid.indexOf(checkStatus.data[i].id)==-1){
                datas.push(checkStatus.data[i]);
                jobid.push(checkStatus.data[i].id);
            }
        }
        inintTable(datas);
    }
    function bindjobs(){
        var result;
        publicAjax(null,'orgrole/bindRoleAndJob',{'roleid':nodes.id,'jobids':jobid.join(",")},false,null,function(r){
            if(r.code==2000){
                laysuccess("绑定成功！");
                result = r;
            }else{
                layerror("绑定失败！");
                result = r;
            }
        })
    }

</script>
</body>

</html>
